<template>
	<view>
		<button class="button" @tap="cerate">创建群组头像</button>
		<view class="prompt">超过9个只显示9个</view>
		<view class="" style="display: flex;justify-content: flex-start;align-items: center; flex-wrap: wrap;">
			<view class="" v-for="(item,index) in imgs" :key="index">
				<view style="width: 102px; height: 102px; margin: 8px; border: 1px solid #007AFF;">
					<canvas :canvas-id="canvasId+index"></canvas>
				</view>
				<view style="margin: 8px; text-align: center;">{{index}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import createAvatar from '@/uni_modules/ch-avatar/js_sdk/index.js'
	export default {
		data() {
			return {
				canvasId: 'canvas',
				imgs: [
					'https://img0.baidu.com/it/u=3101694723,748884042&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=3566088443,3713209594&fm=26&fmt=auto&gp=0.jpg',
					'https://img1.baidu.com/it/u=1361135963,570304265&fm=26&fmt=auto&gp=0.jpg',
					'https://img1.baidu.com/it/u=2496571732,442429806&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=4247656867,4135832390&fm=11&fmt=auto&gp=0.jpg',
					'https://img0.baidu.com/it/u=3438413553,834879777&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=3681880960,455182084&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=3681880960,455182084&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=3681880960,455182084&fm=26&fmt=auto&gp=0.jpg',
					'https://img2.baidu.com/it/u=3681880960,455182084&fm=26&fmt=auto&gp=0.jpg',
				]
			}
		},
		onLoad() {},
		methods: {
			async cerate() {
				for (let i = 0; i < this.imgs.length; i++) {
					let t_imgs = JSON.parse(JSON.stringify(this.imgs))
					t_imgs.splice(i)
					let res = await createAvatar({
						canvasId: 'canvas' + i,
						data: t_imgs,
						width: 100
					})
				}
			}
		}
	}
</script>

<style lang="scss">
</style>
